<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JavaScript 留言板</title>
  <style>
    #message-board {
      width: 300px;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 10px;
    }

    #message-input {
      width: 100%;
      margin-bottom: 10px;
    }

    #add-message-btn {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }

  .message {
      border-bottom: 1px solid #ccc;
      margin-bottom: 5px;
      padding-bottom: 5px;
    }
  </style>
</head>

<body>
  <div id="message-board">
    <h2>留言板</h2>
    <input type="text" id="message-input" placeholder="输入留言">
    <button id="add-message-btn">添加留言</button>
    <div id="message-display"></div>
  </div>

  <script>
    // 获取添加留言按钮和留言显示区域
    const addMessageBtn = document.getElementById('add-message-btn');
    const messageDisplay = document.getElementById('message-display');

    // 点击添加留言按钮的事件处理函数
    addMessageBtn.addEventListener('click', function () {
      const messageInput = document.getElementById('message-input');
      const newMessage = messageInput.value;

    

      // 创建新的留言元素
      const messageElement = document.createElement('div');
      messageElement.classList.add('message');
      messageElement.textContent = newMessage;

      // 将新留言添加到留言显示区域
      messageDisplay.appendChild(messageElement);
      //清空输入框的内容
      messageInput.value = ''; 
    });
  </script>
</body>

</html>